<template>
	<view class="uni-margin-wrap_">
		<image class="bg-set" :class="currentIndexBg == 1 ? 'currentclass' : 'currentclass_1'" mode="aspectFill" v-if="swiperImageList[currentIndex]" :src="swiperImageList[currentIndex].image ? swiperImageList[currentIndex].image : 'https://z3.ax1x.com/2021/07/20/WNpgp9.png'"></image>
		<view class="bg-set_hei"></view>
		<view class="top_logo">
			<image src="https://z3.ax1x.com/2021/07/20/WN9VBV.png"></image>
		</view>
		<swiper class="swiper_" :vertical="true" :touchable="false" :current="currentIndexBg" @change="swiperTabBg">
			<swiper-item>
				<scroll-view scroll-y="true" class="scrollView">				
				<view class="swiper-item_1">
					<!-- <image class="bg-set" mode="aspectFill" v-if="swiperImageList[currentIndex]" :src="swiperImageList[currentIndex].image ? swiperImageList[currentIndex].image : 'https://z3.ax1x.com/2021/07/20/WNpgp9.png'"></image> -->
					<!-- <view class="top_index">
						<image src="https://z3.ax1x.com/2021/07/20/WN9VBV.png"></image>
					</view> -->
					<view class="content">
						<view class="content_swiper">
							<swiper :current="currentIndex" class="swiper" @change="swiperTab" :interval="3000" :duration="500" :previous-margin="previous_next" :next-margin="previous_next">
								<swiper-item v-for="(item,index) in swiperImageList" :key="index" @click="goCaseDetails(item.url)">
									<!-- <view class="swiper-item">
										<yh-image-loading :mode="currentIndex === index ? 'widthFix' : ''" class="swiper-itemImage" :imageSrc="item.image" loadingIngImg="../../static/default_2.png" :class="currentIndex === index ? 'swiperItemActive' : ''"></yh-image-loading>
									</view> -->
									<view class="swiper-item"><image mode="" :src="item.image" class="swiper-itemImage" :class="currentIndex === index ? 'swiperItemActive' : ''"></image></view>
								</swiper-item>
							</swiper>
						</view>
						<view class="content_text" v-if="swiperImageList[currentIndex]">
							<view class="content_text_theme">{{swiperImageList[currentIndex].title}}</view>
							<view class="content_text_text">
								<rich-text v-if="swiperImageList[currentIndex].description" :nodes="swiperImageList[currentIndex].description"></rich-text>
								<rich-text v-else :nodes="contentTextList[2].text"></rich-text>
							</view>
							<view class="case">
								<image class="case_img" src="https://z3.ax1x.com/2021/07/20/WNV57R.png"></image>
								<br/>
								<text class="case_text">更多案例</text><br/>
								<!-- <image @click="goMoreCases" class="case_img_" src="https://z3.ax1x.com/2021/07/23/WsqpY8.png"></image> -->
								<image @click="goMoreCases" class="case_img_" src="https://z3.ax1x.com/2021/08/09/f8ZTr8.gif"></image>
							</view>
						</view>
					</view>
				</view>
				
				</scroll-view>
			</swiper-item>
			<swiper-item>
			<!-- <swiper-item @touchmove.stop> -->
				<view class="status_bar_ swiper-item_2">
						<!-- <view class="top zIndex">
							<image @click="goIndex" src="https://z3.ax1x.com/2021/07/20/WN9VBV.png"></image>
						</view> -->
						<view class="search bg" :class="currentIndexBg == 1 ? 'currentBg' : ''" @click="toSearch">
							<u-search class="u-search" bg-color="#000000" border-color="#666666" :clearabled="true" :show-action="false" placeholder="输入项目关键词进行搜索" v-model="keyword" search-icon-color="#666666" :disabled="true" height="80" margin="0 40rpx 0 40rpx">
							  </u-search>
						</view>
						<!-- <view class="bar_1 bg zIndex" :class="currentIndexBg == 1 ? 'currentBg' : ''">
							<view class="content_bg_1" :class="currentIndexBg == 1 ? 'currentContent_bg_1' : ''"></view>
						</view> -->
<!-- 						<view class="bar bg zIndex">
							<view class="barItem" :class="currentNavigationIndex == 0 ? 'barItemSelect' : ''" @click="currentNavigationIndex = 0">
								线上项目
								<view v-if="currentNavigationIndex == 0"><image class="barItemImg" src="https://z3.ax1x.com/2021/07/21/WUdG28.png"></image></view>
							</view>
							<view class="barItem barItemMiddle" :class="currentNavigationIndex == 1 ? 'barItemSelect' : ''" @click="currentNavigationIndex = 1">线下项目<view v-if="currentNavigationIndex == 1"><image class="barItemImg" src="https://z3.ax1x.com/2021/07/21/WUdG28.png"></image></view></view>
							<view class="barItem" :class="currentNavigationIndex == 2 ? 'barItemSelect' : ''" @click="currentNavigationIndex = 2">产品视频<view v-if="currentNavigationIndex == 2"><image class="barItemImg" src="https://z3.ax1x.com/2021/07/21/WUdG28.png"></image></view></view>
							<view class="content_bg"></view>
						</view> -->
						
						<view class="swiperNavigation">
							<view class="content_m">
								<scroll-view :scroll-y="true" class="scroll-Y">
									<view class="content_" v-for="(item, index) in contentList" :key="index" :class="index % 2 == 0 ? '' : 'content_even'">
										<!-- <view class="content_img_border"> -->
										<u-lazy-load imgMode="aspectFill" class="content_img"  height="324rpx" border-radius="24" :image="item.image"  :errorImg="imgBase64.cl_2" @click="goCaseDetails(item)" :error-img="$imgBase64.cl_2"></u-lazy-load>
										<!-- </view> -->
										<!-- 新作不能删 -->
										<!-- <image v-if="index < 3" src="https://z3.ax1x.com/2021/08/10/fYPA5n.png" class="imageXinZuo"></image> -->
										<view class="content_view1">{{item.title}}</view>
										<view class="content_view2" v-if="item.intro">{{item.intro}}</view>
										<view class="content_view2" :class="index == contentList.length-1? 'mB_30' : ''" v-else>这是一款服务智能健身房会员</view>
									</view>
								</scroll-view>
							</view>
						</view>
						
						<!-- <swiper :touchable="false" class="swiperNavigation" :current="currentNavigationIndex" @change="swiperNavigationIndex">
							<swiper-item>
								<view class="content_m">
									<scroll-view scroll-y="true" class="scroll-Y">
										<view class="content_" v-for="(item, index) in contentList" :key="index" :class="index % 2 == 0 ? '' : 'content_even'">
											<u-lazy-load imgMode="aspectFill" class="content_img"  height="324rpx" border-radius="24" :image="item.image"  :errorImg="imgBase64.cl_2" @click="goCaseDetails(item)" :error-img="$imgBase64.cl_2"></u-lazy-load>
											<view class="content_view1">{{item.title}}</view>
											<view class="content_view2">{{item.intro}}</view>
										</view>
									</scroll-view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content_m">
									<scroll-view scroll-y="true" class="scroll-Y">
										<view class="content_" v-for="(item, index) in offlineList" :key="index" :class="index % 2 == 0 ? '' : 'content_even'">
											<image class="content_img_offline" :src="item.image ? item.image : loadingImg" @click="goCaseDetails(item)"></image>
											<view class="content_view1">{{item.title}}</view>
											<view class="content_view2">{{item.intro}}</view>
										</view>
									</scroll-view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="viewProduct">
									<scroll-view scroll-y="true" class="scroll-Y">
										<view class="viewProduct_" v-for="(item, index) in productList" :key="index">
											<video :id="'video'+item.id" :src="item.video" objectFit="cover" @play="playVideo" @error="errorVideo(item.video)" :poster="item.image" ></video>
											<view @click="goVideoDetails(item)">
												<view class="viewProduct_theme">{{item.title}}</view>
												<view class="viewProduct_text">{{item.intro}}</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</swiper-item>
						</swiper> -->
						<view class="bg-set-low_" :class="currentIndexBg == 1 ? 'currentBg-set-low_' : ''"></view>
						<view class="bg-set-low" :class="currentIndexBg == 1 ? 'currentBg-set-low' : ''"></view>
					</view>
			</swiper-item>
		</swiper> 
	</view>
</template>

<script>
	import yhImageLoading from '@/components/yh-ui/yh-image-loading/yh-image-loading.vue'
	
	export default {
		data() {
			return {
				currentIndexBg: 0,
				imgBase64: this.$imgBase64,
				loadingImg: './static/default_1.png',
				controls: false,
				currentNavigationIndex: 0,
				swiperHeight: 0,
				bgSrc: "https://z3.ax1x.com/2021/07/20/WNpgp9.png",
				previous_next: "65rpx",
				swiperImageList:[],
				contentTextList:[
					{
						theme: '小Zip设计',
						text: '从需求分析到视觉呈现有着丰富的产品体现<br/>我们期待与您一起用设计的力量提升商业价值<br/> '
					},
					{
						theme: '小Zip设计',
						text: '从需求分析到视觉呈现有着丰富的产品体现<br/>我们期待与您一起用设计的力量提升商业价值<br/> '
					},
					{
						theme: '电影海报设计',
						text: '从需求分析到视觉呈现有着丰富的产品体现<br/>我们期待与您一起用设计的力量提升商业价值<br/>Good design is good business'
					},
				],
				currentIndex: 0,
				
				// moreCase
				playBtnShowIndex: -1,
				playBtnShow:true,
				isbarItemImgShow: 1,
				itemIndex: 1,
				keyword: '',
				productList: [],
				contentList:[],
				offlineList:[],
				videoList:[]
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			uni.getSystemInfo({
				success:(res) => {
					console.log("屏幕大小为:" + res.windowHeight )
					this.swiperHeight = res.windowHeight + 'px'
				}
			})
		},
		methods: {
			init(){
				// 首页海报接口
				this.$api.banners().then(res => {
					this.swiperImageList = res.data
					console.log("this.swiperImageList", this.swiperImageList)
				})
				
				// 线下项目接口
				// this.$api.offlines().then(res => {
				// 	this.offlineList = res.data.list
				// })
				
				// 线上项目
				this.$api.onlines().then(res => {
					this.contentList = res.data.list
				})
				
				// 视频案例
				// this.$api.videos().then(res => {
				// 	this.productList = res.data.list
				// 	this.productList.forEach((item, index) =>{
				// 		let _ = []
				// 		_ = {'id':item.id, "video": item.video}
				// 		this.videoList.push(_)
				// 	})
				// 	console.log("视频列表", this.videoList)
				// })
				
				
			},
			swiperTab (e) {
				console.log(e.detail.current)
				this.currentIndex = e.detail.current
				this.bgSrc = this.swiperImageList[this.currentIndex].bgsrc
				console.log(this.bgSrc)
			},
			swiperTabBg(e){
				this.currentIndexBg = e.detail.current
			},
			goMoreCases(){
				uni.showToast({
					title: "请继续往上划",
					icon: "none"
				})
			},
			
			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			goCaseDetails(item) {
				console.log("item", item)
				if(typeof(item) == "string" && item.indexOf("http") != -1){
					// item = encodeURI(JSON.stringify(item))
					uni.navigateTo({
						// url: '../caseDetails/caseDetails?id=' + id
						url: '../caseDetails/caseDetails?item=' + item + '&isUrl=ture'
					})
				}else if(item != null){
					item = encodeURI(JSON.stringify(item))
					uni.navigateTo({
						// url: '../caseDetails/caseDetails?id=' + id
						url: '../caseDetails/caseDetails?item=' + item
					})
				}else{
					uni.showToast({
						icon: "none",
						title: "暂无详情"
					})
				}
				
				
				// item = encodeURI(JSON.stringify(item))					
				// uni.navigateTo({
				// 	url: '../caseDetails/caseDetails?item=' + item
				// })
			},
			goVideoDetails(item) {
				console.log("item", item)
				item = encodeURI(JSON.stringify(item))	
				uni.navigateTo({
					// url: '../videoDetails/videoDetails?id=' + id
					url: '../videoDetails/videoDetails?item=' + item
				})
			},
			playVideo(e) {
				this.controls = true
				console.log("视频", e)
				console.log("视频", e.currentTarget.id)
				
				// 获取当前视频id
				// let currentId = 'video' + e.currentTarget.id
				let currentId = e.currentTarget.id
				
				// 获取选中视频
				// let videoContent = uni.createVideoContext(currentId,this).play()
				// 获取视频列表
				let trailer = this.videoList
				trailer.forEach((item, index) => {
					if(item != null && item != ''){
						let temp = 'video' + item.id
						if(temp != currentId){
							// 暂停其他视频
							uni.createVideoContext(temp, this).pause()
						}
					}
				})
				
				/* 播放前关闭前一个 */
/* 					let videoPrevious = uni.createVideoContext('myVideo' + this.playBtnShowIndex)
				videoPrevious.pause()
				
				this.playBtnShow = false
				this.playBtnShowIndex = index
				console.log("this.playBtnShowIndex", this.playBtnShowIndex)
				let video_ = uni.createVideoContext('myVideo'+index)
				console.log("video_", video_)
				video_.play() */
			},
			goIndex() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			videoPause() {
				this.playBtnShowIndex = -1
			},
			swiperNavigationIndex(e) {
				console.log(e.detail.current)
				this.currentNavigationIndex = e.detail.current
			},
			errorVideo(src){
				uni.showToast({
					icon: "none",
					title: "视频错误 请联系管理人员",
					duration: 2000
				})
			},
		},
		components: {
			"yh-image-loading": yhImageLoading
		}
	}
</script>

<style scoped>
	*{
		 /* touch-action: none; */
	}
	.scrollView{
		/* height: 100%; */
		height: calc(100vh - 198rpx);
	}
	
	.uni-margin-wrap_ {
		height: 100vh;
		width: 750rpx;
		/* width: 100%; */
		background-color: #000000;
	}
	.swiper_ {
		position: relative;
		width: 750rpx;
		/* height: 1624rpx; */
		top: 198rpx;
		/* top: 99rpx; */
		height: calc(100vh - 198rpx);
	}
	.swiper-item_1 {
		width: 750rpx;
		display: block;
		/* padding-top: 88rpx; */
		/* height: calc(100vh - 198rpx); */
	}
	.swiper-item_2{
		width: 750rpx;
		display: block;
		height: 1624rpx;
		/* 视频内容滑动圆角 */
		border-radius: 24rpx;
		overflow: hidden;
		/* height: 100vh; */
	}
	.bg-set{
		position: fixed;
		width: 750rpx;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 0;
		filter: blur(35rpx);
		transform: scale(1.3);
		opacity: 1;
	}
	.bg-set_hei{
		position: fixed;
		width: 750rpx;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 0;
		background-color: #000000;
		opacity: 0.5;
	}
	.content{
		/* margin-top: 66rpx; */
	}
	.swiper{
		width: 100%;
		height: 904rpx;
		/* height: 784rpx; */
		/* position: absolute; */
	}
	.swiper-item{
		width: 100%;
		height: 100%;
		/* font-size: 0rpx; */
/* 		position: relative;
		margin-top: 34rpx;
		width: 606rpx;
		height: 836rpx; */
		/* border-radius: 24rpx; */
	}
	.swiper-itemImage{
		/* background: none; */
		/* position: relative;
		top: 0; */
		margin-top: 34rpx;
		width: 606rpx;
		height: 836rpx;
		/* width: 526rpx;
		height: 784rpx; */
		transition: all 0.5s;
		border-radius: 24rpx;
		transform: scale(0.9);
	}
	.swiperItemActive{
		transition: top 0.5s linear, height 0.5s linear;
		transform: scale(1);
		border-radius: 24rpx;
		transition: all 0.5s;
	}
	.content_swiper{
		text-align: center;
		/* height: 904rpx; */
	}
	.content_text{
		/* height: 432rpx; */
		height: 100%;
		margin-top: 48rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.content_text_theme{
		font-size: 48rpx;
		font-weight: 500;
		font-family: PingFang SC, PingFang SC-Medium;
		text-shadow: 2rpx 4rpx 4rpx rgba(0,0,0,0.96); 
	}
	.content_text_text{
		height: 116rpx;
		margin-top: 24rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		opacity: 0.62;
		text-shadow: 2rpx 4rpx 4rpx rgba(0,0,0,0.96);
		
	}
	.case{
		/* height: 154rpx; */
		/* background-color: #FFF; */
		margin-top: 46rpx;
	}
	.case_img{
		width: 188rpx;
		height: 38rpx;
	}
	.case_text{
		color: #F45408;
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: 500;
		position: relative;
		top: -24rpx;
	}
	.case_img_{
		/* width: 56rpx;
		height: 56rpx; */
		width: 96rpx;
		height: 96rpx;
		position: relative;
		top: -20rpx;
		
	}
	
	/* moreCase */
	.scroll-Y{
		width: 670rpx;
		/* height: calc(100vh - 422rpx); */
		/* height: calc(100vh - 342rpx); */
		height: 100%;
		border-radius: 24rpx;
		overflow: hidden;
	}
	.top{
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 198rpx;
		padding-top: 88rpx;
		padding-bottom: 24rpx;
		background: linear-gradient(#503122 20%, #292929);
	}
	.top image{
		width: 144rpx;
		height: 72rpx;
		margin-left: 318rpx;
	}
	.status_bar_{
		margin-top: 0;
		height: 100vh;
		/* background-color: #000000; */
		/* z-index: -1; */
	}
	.bg{
		/* 后面需要 */
		/* background-color: #292929; */
	}
	.currentBg{
		/* background-color: #292929; */
	}
	.bg-set_{
		width: 750rpx;
		height: 100vh;
		z-index: -1;
		position: fixed;
		top: 0;
		background-color: #000000;
	}
	.bg-set-top{
		width: 750rpx;
		/* height: 240rpx; */
		height: 240rpx;
		/* opacity: 20%; */
		/* background: linear-gradient(#F45408, rgba(122,47,4,0)); */
		background: linear-gradient(#503122, #292929);
	}
	.bg-set-m{
		width: 750rpx;
		height: 170rpx;
		background-color: #292929;
	}
	.search{
		position: fixed;
		/* top: 198rpx; */
		width: 750rpx;
		height: 80rpx;
	}
	.bg-set-low_{
		position: fixed;
		bottom: 264rpx;
		width: 750rpx;
		height: calc( 100vh - 264rpx);
		/* 后面需要 */
		/* background-color: #000000; */
		z-index: -1;
	}
	.currentBg-set-low_{
		/* background-color: #000000; */
	}
	.bg-set-low{
		position: fixed;
		bottom: 0;
		/* top: calc(100vh - 240rpx - 170rpx); */
		width: 750rpx;
		height: 264rpx;
		z-index: -1;
		/* 后面需要 */
		/* background: linear-gradient(#000000, #2f1002); */
	}
	.currentBg-set-low{
		/* background: linear-gradient(#000000, #2f1002); */
	}
	.u-search{
		width: 670rpx;
		height: 80rpx;
		
	}
	.bar{
		position: fixed;
		top: calc(198rpx + 80rpx);
		width: 750rpx;
		height: 140rpx;
		padding: 32rpx 88rpx 0 88rpx;
		font-size: 30rpx;
		color: #AAAAAA;
		
	}
	.bar_1{
		position: fixed;
		/* top: calc(198rpx + 80rpx); */
		top: 80rpx;
		width: 750rpx;
		height: 40rpx;
		padding: 32rpx 88rpx 0 88rpx;
		font-size: 30rpx;
		color: #AAAAAA;
	}
	.barItem{
		display: inline-block;
		/* line-height: 42rpx; */
		vertical-align:top;
		text-align: center;
		height: 70rpx;
	}
	.barItemMiddle{
		margin: 0 106rpx 0 108rpx;
	}
	.barItemSelect{
		color: #FFFFFF;
	}
	.barItemImg{
		position: relative;
		bottom: 0;
		/* z-index: 11 !important; */
		width: 80rpx;
		height: 24rpx;
		z-index: 11;
	}
	.content_m{
		/* height: 1680rpx; */
/* 		position: relative;
		top: -40rpx;
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0; */
		/* margin-top: calc(198rpx + 80rpx + 140rpx); */
		margin-top: calc(80rpx + 48rpx);
		padding: 0rpx 40rpx 0 40rpx;
		height: calc(100vh - 342rpx);
		/* background: #000000; */
	}
	.content_bg{
		position: fixed;
		top: calc(198rpx + 80rpx + 100rpx);
		left: 0rpx;
		width: 750rpx;
		height: 60rpx;
		background-color: #000000;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 10;
	}
	.content_bg_1{
		position: fixed;
		/* top: calc(198rpx + 100rpx); */
		top: 100rpx;
		left: 0rpx;
		width: 750rpx;
		height: 40rpx;
		/* 后面需要 */
		/* background-color: #000000; */
		border-radius: 40rpx 40rpx 0 0;
		z-index: 10;
	}
	.currentContent_bg_1{
		/* background-color: #000000; */
	}
	.content_m .content_{
		/* height: 1680rpx; */
		/* position: relative; */
		width: 324rpx;
		display: inline-block;
		margin-bottom: 40rpx;
		vertical-align: text-top;
	}
	.content_m .content_even{
		margin-left: 22rpx;
	}
	.content_m .content_img{
		background: none;
		width: 324rpx;
		height: 324rpx;
		border-radius: 24rpx;
		/* padding: 1rpx; */
	}
/* 	.content_m .content_img_border{
		width: 324rpx;
		height: 324rpx;
		border: 1.2rpx #333333 dashed;
	} */
/* 	.content_m .content_img image{
		width: 324rpx;
		height: 324rpx;
		border-radius: 24rpx;
	} */
	.content_m .content_img_offline{
		width: 324rpx;
		height: 240rpx;
	}
	.content_m .content_view1{
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 12rpx;
		text-align: center;
	}
	.content_m .content_view2{
		font-size: 24rpx;
		color: #FFFFFF;
		opacity: 0.48;
		line-height: 32rpx;
		margin-top: 4rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}
	.mB_30{
		margin-bottom: 60rpx;
	}
	.zIndex{
		z-index: 10 !important;
	}
	
	/* 产品视频 */
	.viewProduct{
		margin-top: calc(198rpx + 80rpx + 140rpx);
		padding: 0rpx 40rpx 0 40rpx;
	}
	.viewProduct_{
		color: #FFFFFF;
		position: relative;
	}
	.viewProduct_ video{
		/* width: 706rpx; */
		width: 670rpx;
		height: 372rpx;
		/* margin: 0 22rpx; */
		object-fit: fill;
		border-radius: 24rpx !important;
	}
/* 	.video_play_icon{
		position:absolute;
		top: 56rpx;
		left: 252rpx;
		width: 248rpx;
		height: 248rpx;
		z-index: 2;
	} */
	.viewProduct_theme{
		font-size: 28rpx;
		line-height: 40rpx;
		/* margin-left: 40rpx; */
	}
	.viewProduct_text{
		opacity: 0.48;
		font-size: 24rpx;
		line-height: 32rpx;
		margin: 4rpx 0 28rpx 0rpx;
	}
/* 	/deep/ uni-swiper .uni-swiper-wrapper {
	     overflow-y: auto !important;
	 }
	/deep/ uni-swiper-item {
	    overflow-y: auto !important;
	 } */
/* 	/deep/ .uni-video-control-button.uni-video-control-button-play:after, .uni-video-cover-play-button {
	    background-image: url();
	} */
	.swiperNavigation{
		width: 750rpx;
		/* height: calc(100vh - 422rpx); */
		height: 100vh;
	}
	.top_logo{
		/* position: fixed; */
		position: absolute;
		top: 0rpx;
		z-index: 10;
		width: 750rpx;
		height: 198rpx;
		/* background: linear-gradient(#503122 20%, #292929); */
	}
	.top_logo image{
		width: 144rpx;
		height: 72rpx;
		margin-left: 318rpx;
		position: relative;
		top: 88rpx;
	}
	.currentclass{
		opacity: 1.0;
		animation: op 0.4s linear;
		animation-fill-mode: forwards;
	}
	.currentclass_1{
		opacity: 0.0;
		animation: op1 0.4s linear;
		animation-fill-mode: forwards;
	}
	@keyframes op{
		100%{
			opacity: 0.0;
		}
	}
	@keyframes op1{
		100%{
			opacity: 1.0;
		}
	}
	.imageXinZuo{
		position: absolute;
		top: 0;
		width: 108rpx;
		height: 60rpx;
	}
/* 	/deep/ .uni-scroll-view-content{
		overflow: scroll !important;
		background-color: #000000 !;
		z-index: 1000;
	} */
</style>
